'use strict';

var CesiumPolyline = React.createClass({
    displayName: 'CesiumPolyline',
    componentDidMount: function componentDidMount() {
        var polylines = this.props.polylines;

        //设置自定义label的默认不变属性
        if (polylines) {
            this.polyline = polylines.add({
                positions: [],
                width: 1.0,
                loop: false, //形成闭合环，可以用于measurement工具
                material: Cesium.Material.fromType('Color', {
                    color: Cesium.Color.RED
                })
            });
        }

        this.updatePolyline();
    },
    componentWillUnmount: function componentWillUnmount() {
        var polylines = this.props.polylines;

        if (polylines && !polylines.isDestroyed() && this.polyline) {
            polylines.remove(this.polyline);
        }
    },
    componentDidUpdate: function componentDidUpdate(prevProps) {
        if (!shallowEqual(prevProps, this.props)) {
            this.updatePolyline();
        }
    },
    updatePolyline: function updatePolyline() {
        var _props = this.props,
            coords = _props.coords,
            _props$loop = _props.loop,
            loop = _props$loop === undefined ? false : _props$loop,
            _props$color = _props.color,
            color = _props$color === undefined ? "red" : _props$color;

        if (this.polyline) {
            var cartographics = coords.map(function (coord) {
                return Cesium.Cartographic.fromDegrees(coord.lon, coord.lat, coord.alt);
            });
            var cartesians = Cesium.Ellipsoid.WGS84.cartographicArrayToCartesianArray(cartographics);

            var colorValue = Cesium.Color.fromCssColorString(color);

            this.polyline.positions = cartesians;
            this.polyline.loop = !!loop;
            this.polyline.material.uniforms.color = colorValue;
        }
    },
    render: function render() {
        return null;
    }
});